<template>
  <div id="head">
    <div class="width-100 head-logo-box">
      <div class="container fix">
        <div class="flo-left">
          <a href="/#/index/welcome"><img src="../assets/logo.png" alt=""></a>
        </div>
        <div class="flo-right">
          <button>{{typeFn}}</button>
          <button @click="logout" v-show="this.$store.state.isLogin">退出系统</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {}
  },
  methods: {
    logout() {
      this.$store.dispatch('getLoginOut').then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('退出成功')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
          this.$router.push('/login')
        }
      }, err => {
        console.log(err)
      })
    }
  },
  computed: {
    typeFn() {
      return this.$store.state.userInfo.userName
    }
  }
}

</script>
<style type="text/css" scoped>
.head-login-box .flo-right {
  margin-right: 24px;
  line-height: 40px;
}

.head-login-box .flo-right span,
.head-login-box .flo-right a {
  margin-right: 30px;
  display: inline-block;
}

.head-login-box a {
  color: #023fa1;
}

.head-login-box a.help-center {
  color: #a5a5a5;
}

.head-logo-box {
  padding: 11px 0;
  background-color: #01378c;
}

.head-logo-box .flo-lleft img {
  width: 259px;
  height: 38px;
}

input::-webkit-input-placeholder {
  color: #fff;
}

button {
  color: #fff;
  line-height: 30px;
  margin: 7px 10px 0 10px;
}

</style>
